import { defineComponent } from 'vue'
import { ElDialog, ElButton, ElTag } from 'element-plus'
import type { FormValuesType } from './typings'
import type { TableColumnProps } from '~/components/ProSaasTable/typings'
import ProSaasTable from '~/components/ProSaasTable'

export default defineComponent({
  name: 'DeviceListView',
  props: ['deviceId', 'show', 'cancel'],
  setup(props) {
    const columns: TableColumnProps<FormValuesType>[] = [
      {
        label: '警报名称',
        prop: 'alarmName',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      },
      {
        label: '设备名称',
        prop: 'deviceName',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      },
      {
        label: '设备型号',
        prop: 'modelName',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      },
      {
        label: '设备地址',
        prop: 'alarmAddress',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      },
      {
        label: '警报状态',
        prop: 'alarmState',
        minWidth: 180,
        sortable: true,
        showOverflowTooltip: true,
        render: (_, value) => {
          return (
            <>
              {value === 0 && <ElTag type="success">恢复</ElTag>}
              {value === 1 && <ElTag type="danger">报警</ElTag>}
            </>
          )
        }
      },
      {
        label: '警报时间',
        prop: 'reportTime',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      }
    ]

    return () => (
      <ElDialog
        title="设备列表"
        modelValue={props.show}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        beforeClose={props.cancel}
        width={1000}
        v-slots={{
          footer: () => (
            <>
              <ElButton onClick={props.cancel}>取消</ElButton>
            </>
          )
        }}
      >
        <ProSaasTable<FormValuesType>
          tableId="manhole_runmap_fault_device"
          dispatchType="manholes/ManholeMapGetDeviceAlarmGet"
          columns={columns}
          searchParams={{
            deviceId: props.deviceId
          }}
        />
      </ElDialog>
    )
  }
})
